<template>
  <div class="role-manage-list">
    <a-card :bordered="false" style="width: 100%" id="qiankun-role-manage">
      <div slot="title">
        <a-icon type="left" class="mr10" @click="goBack" />
        <span>{{ name }} / 组织身份</span>
      </div>
      <span slot="extra">
        <a-button type="primary" @click="handleAddRole" icon="snippets">新增组织身份</a-button>
      </span>
      <a-table :scroll="{ x: 1000 }" :columns="roleColumns" :data-source="roleList" :rowKey="(record) => record.id" :loading="isLoading"
        :pagination="{
          showTotal: () => `总共${pagination.total}条`,
          showQuickJumper: true,
          showSizeChanger: true,
          total: pagination.total,
          current: pagination.currentPage,
          pageSize: pagination.pageSize,
        }" @change="onTableChange">
        <!-- 数据权限 -->
        <template slot="dataAuthority" slot-scope="text, record">
          <a-button type="primary" :disabled="hasNoAuth" size="small" ghost class="mr10" @click="handleDataAuthority(record,'view')">查看</a-button>
          <a-button type="primary" :disabled="hasNoAuth" size="small" ghost @click="handleDataAuthority(record,'edit')">编辑</a-button>
        </template>
        <!-- 栏目权限 -->
        <template slot="operationsAuthority" slot-scope="text, record">
          <a-button type="primary" size="small" ghost class="mr10" @click="handleColumnAuthority(record,'view')">查看</a-button>
          <a-button type="primary" size="small" ghost @click="handleColumnAuthority(record,'edit')">编辑</a-button>
        </template>
        <!-- 人员列表 -->
        <template slot="personnelList" slot-scope="text, record">
          <a-button type="primary" size="small" ghost @click="handleManage(record)">管理</a-button>
        </template>
        <!-- 操作 -->
        <template slot="operations" slot-scope="text, record">
          <a-button type="primary" size="small" class="mr10" @click="handleEditRole(record)">编辑</a-button>
          <!-- 1:企业创建者, 2.平台管理员, 3.企业管理员, 4.组织管理员 5:其他 -->
          <a-button type="danger" size="small" @click="handleRemove(record)" v-if="record.type !== 1">移除</a-button>
        </template>
      </a-table>
      <div class="record">
        <span
          class="cursor-pointer mr30"
          @click="handleRecordList('identityRemoveRecordList')"
        >
          <a-icon type="file-done" class="mr10" />移除记录
        </span>
      </div>
    </a-card>
    <data-permission ref="dataPermission" @success="getRoleList"></data-permission>
    <column-permission ref="columnPermission" @success="getRoleList"></column-permission>
    <role-modal ref="roleModal" @success="getRoleList"></role-modal>
  </div>
</template>

<script>
import columnPermission from "./components/columnPermission.vue";
import dataPermission from "./components/dataPermission.vue";
import roleModal from "./components/roleModal.vue";
import { roleColumns, tabMap } from "../data";
import { getRoleList, deleteRoleList } from "@/services/roleManage";
import { storeQiankun } from 'if-qiankun-config'

const qianKunInstance = storeQiankun.Instance

export default {
  name: "roleManage",
  components: {
    dataPermission,
    columnPermission,
    roleModal
  },
  data() {
    return {
      roleColumns,
      isLoading: false,
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      roleList: [],
      hasNoAuth: false
    };
  },
  watch: {},
  created() {
    this.getRoleList();
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
    name() {
      return decodeURIComponent(this.$route.query.name);
    }
  },
  methods: {
    async getRoleList() {
      let params = {
        departmentId: this.id,
        ...this.pagination
      };
      Object.prototype.hasOwnProperty.call(params, 'total') && delete params.total;
      this.isLoading = true;
      let {
        data: { data, code }
      } = await getRoleList(params);
      if (code === 200) {
        this.isLoading = false;
        this.roleList = data.roleList || [];
        this.pagination.total = data.total;
        this.hasNoAuth = !qianKunInstance.state.value?.appProperty?.permissionStatus
      }
    },
    onTableChange({ current, pageSize }) {
      this.pagination.currentPage = current;
      this.pagination.pageSize = pageSize;
      this.getRoleList();
    },
    handleManage(val) {
      this.$router.push({
        path: '/car-team/system-qiankun/departmentManage-personnel-inner-qiankun',
        query: {
          id: this.id,
          key: tabMap.personnelManage,
          roleId: val.id,
          from: 'inner',
          name: encodeURIComponent(this.name),
          roleName: encodeURIComponent(val.name)
        }
      });
    },
    // 新增身份
    handleAddRole() {
      this.$refs.roleModal.show({}, 'add')
    },
    // 编辑身份
    handleEditRole(record) {
      this.$refs.roleModal.show(record, 'edit')
    },
    // 数据权限
    handleDataAuthority(record, type) {
      this.$refs.dataPermission.showDrawer(record, type);
    },
    // 栏目权限
    handleColumnAuthority(record, type) {
      this.$refs.columnPermission.showDrawer(record, type);
    },
    // 操作
    handleRemove(record) {
      let that = this;
      this.$confirm({
        title: "移除操作",
        content: () => (
          <div>
            你确定要移除该
            <span style="color:red;"> {record.name} </span>
            角色吗？
          </div>
        ),
        async onOk() {
          let params = {
            id: record.id,
            departmentId: record.departmentId
          };
          const {
            data: { message, code }
          } = await deleteRoleList(params);
          if (code === 200) {
            that.$message.success("移除成功");
            let totalPage = Math.ceil((that.pagination.total - 1)/that.pagination.pageSize);
            let currentPage = that.pagination.currentPage > totalPage ? totalPage : that.pagination.currentPage;
            that.pagination.currentPage = that.pagination.currentPage < 1 ? 1 : currentPage;
            that.visible = false;
            that.getRoleList();
          } else {
            that.$message.error(message);
          }
        }
      });
    },
    handleRecordList(val) {
      let key = tabMap[val];
      const { name, roleName, id } = this.$route.query
      this.$router.push({
        path: '/car-team/system-qiankun/departmentManage-identityRemoveRecordList-qiankun',
        query: {
          id,
          key,
          name: name + ' / 组织身份',
          roleName
        }
      });
    },
    goBack() {
      this.$router.go(-1)
    }
  }
};
</script>

<style lang="less" scoped>
.role-manage-list {
  ::v-deep .ant-card-head-title {
    font-weight: 600;
    padding: 12px 0;
    font-size: 18px;
  }
  .record {
    position: absolute;
    left: 24px;
    bottom: 28px;
    color: #3d6cf7;
    z-index: 100;
  }
}
</style>
